<template>
  <div class="container">
    <Container>
      <el-row>
        <el-col class="input-header" :span="15">
          <el-form class="searchForm" inline>
            <el-form-item
              label="关键字"
              label-width="60px"
              class="search-input"
            >
              <el-input
                @input="inputChange"
                v-model="page.keyword"
                placeholder="根据文章标题搜索"
              />
            </el-form-item>
            <el-form-item label="状态" label-width="60px" class="search-input">
              <el-select v-model="page.state" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.state"
                  :label="item.label"
                  :value="item.state"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="search-Btn">
              <el-button @click="handleClear">清空</el-button>
              <el-button @click="handleSearch" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-button
          @click="handleAdd"
          class="add-btn"
          icon="el-icon-edit"
          type="success"
          >新增技巧</el-button
        >
      </el-row>
      <el-alert
        :closable="false"
        :title="`数据一共${page.counts}条`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template v-slot="{ row }">
            <span>{{ row.title }}</span>
            <i
              @click="playVideo(row.videoURL)"
              class="el-icon-video-camera-solid"
              v-if="row.videoURL"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template v-slot="{ row }">
            <span>{{ row.createTime | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <span>{{ row.state === 1 ? '已启用' : '未启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="handlView(row)">预览</el-button>
            <el-button type="text" @click="handleState(row)">{{
              row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              :disabled="row.state === 1"
              type="text"
              @click="handlEdit(row)"
              >修改</el-button
            >
            <el-button
              :disabled="row.state === 1"
              type="text"
              @click="handlDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="page.counts"
      >
      </el-pagination>
      <ArticleAdd @getList="getList" :isShow.sync="isShowAdd" />
      <ArticleAdd
        @getList="getList"
        :currentArt="currentArt"
        :isShow.sync="isShowEdit"
      />
      <ArticlesPreview
        :currentArt="currentArt"
        :isShowPreview.sync="isShowPreview"
      />
    </Container>
    <!-- 视频预览区域 -->
    <el-dialog title="视频预览" :visible.sync="isShowVideo">
      <video-player
        v-if="isShowVideo"
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import { parseTimeByString } from '@/filters'
import ArticleAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
const playerOptions = {
  playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速控制
  autoplay: true, // 是否自动播放
  muted: false, // 是否静音播放
  loop: false, // 是否循环播放
  preload: 'auto',
  language: 'zh-CN',
  aspectRatio: '16:9', // 比例
  fluid: true,
  sources: [
    {
      type: '',
      src: 'https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4' // url地址
    }
  ],
  poster: '', // 你的封面地址
  notSupportedMessage: '此视频暂无法播放，请稍后再试',
  controlBar: {
    timeDivider: true,
    durationDisplay: true, // 剩余时间是否显示
    remainingTimeDisplay: true, // 剩余时间是否显示，有一个即可
    fullscreenToggle: true // 全屏按钮
  }
}
export default {
  name: 'Article',
  components: {
    ArticleAdd,
    ArticlesPreview
  },
  data () {
    return {
      isShowVideo: false,
      // 视频预览配置项
      playerOptions: playerOptions,
      loading: false,
      isShowPreview: false,
      currentArt: {},
      isShowEdit: false,
      isShowAdd: false,
      options: [
        {
          state: 1,
          label: '启用'
        },
        {
          state: 2,
          label: '未启用'
        }
      ],
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        counts: 0,
        state: null,
        keyword: null
      }
    }
  },
  created () {
    this.getList()
  },
  filters: {
    parseTimeByString: (value) => {
      return parseTimeByString(value)
    }
  },
  methods: {
    async getList () {
      this.loading = true
      try {
        const { data } = await list(this.page)
        this.list = data.items
        this.page.page = data.page * 1
        this.page.pagesize = data.pagesize * 1
        this.page.counts = data.counts * 1
      } catch (e) {
        this.$message.error('获取文章列表失败')
      }
      this.loading = false
    },
    // 搜索功能
    handleSearch () {
      this.getList()
    },
    // 清空功能
    handleClear () {
      this.page.keyword = null
      this.page.state = null
      this.getList()
    },
    // 输入框清空
    inputChange (value) {
      if (value === '') {
        this.getList()
      }
    },
    // 新增技巧功能
    handleAdd () {
      this.isShowAdd = true
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 预览按钮功能
    handlView (article) {
      this.isShowPreview = true
      this.currentArt = article
    },
    // 切换状态启用禁用
    async handleState (row) {
      const state = row.state === 1 ? 0 : 1
      await changeState({
        id: row.id,
        state
      })
      this.getList()
    },
    // 编辑按钮功能
    handlEdit (article) {
      this.isShowEdit = true
      // 不解构表单中的数据会实时修改表格
      this.currentArt = { ...article }
    },
    async handlDel (article) {
      await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await remove(article)
        this.$message.success('删除文章成功')
        this.getList()
      } catch (e) {
        this.$message.error('删除文章失败')
      }
    },
    // 视频播放
    playVideo (url) {
      this.isShowVideo = true
      // console.log(url)
      // this.playerOptions.sources[0].src = url
    }
  }
}
</script>

<style scoped lang="less">
.input-header {
  margin-right: 10px;
}
.add-btn {
  float: right;
}
.searchForm {
  display: flex;
  .search-input {
    display: flex;
  }
  .search-Btn {
    margin-left: 10px;
  }
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
::v-deep .el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-icon-video-camera-solid {
  margin-left: 5px;
  color: #5bc049;
  font-size: 20px;
}
</style>
